import logo from "./logo.svg";
import "./App.css";
import { useState, useEffect } from "react";
// 函数组件 || 无状态组件
function App() {
  // 1. 声明数据 useState
  const [count, setCount] = useState(1);

  const addCount = () => {
    setCount(count + 1);
  };

  const addCount123 = () => {
    setCount((state) => {
      // 函数写法永远获取的是上一次的结果
      return state + 1;
    });
  };
  // 2. 副作用函数
  // 2-1 首页渲染完毕， 执行一次
  // 2-2 第二个参数不存在， 任何数据发生改变都会执行一次。 存在依赖项， 当依赖参数发生改变，会执行一次
  // 2-3 返回卸载函数, 当组件被卸载的时候， 该函数执行
  useEffect(() => {
    // 首次渲染执行
    // 更新的时候也会执行， 但是必须依赖的参数发生改变
    return () => {
      // 组件卸载执行
    }
  })

  return (
    <div className="App">
      <h2>{count}</h2>
      <button
        onClick={() => {
          // 经典面试题
          addCount();
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          addCount123();
        }}
      >
        +1
      </button>
    </div>
  );
}

export default App;
